<template>
    <div>
        <el-table :data="tableData" border style="width: 100%" >
        <el-table-column prop="userId" label="编号"   align="center"/>
        <el-table-column prop="userName" label="用户名"   align="center"/>
        <el-table-column prop="userSex" label="性别" width="80" align="center">
            <template #default="scope">
                <el-tag type="primary" v-if="scope.row.userSex">男</el-tag>
                <el-tag type="danger" v-else>女</el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="entryDate" label="入职日期" width="130" align="center">
            <template #default="scope">
                {{scope.row.entryDate.replace('T','').substring(0,10)}}
            </template>
        </el-table-column>
        <el-table-column prop="transferDate" label="转正日期" width="130" align="center">
            <template #default="scope">
                {{scope.row.transferDate.replace('T','').substring(0,10)}}
            </template>
        </el-table-column>
        <el-table-column prop="userElect" label="邮箱" width="180" align="center"/>
        <el-table-column prop="userPhone" label="联系电话" width="120" align="center"/>
        <el-table-column prop="position" label="职务" width="120" align="center"/>
        <el-table-column prop="unitName" label="单位"   align="center"/>
        <el-table-column prop="epartmentName" label="员工状态"  align="center"/>
        <el-table-column prop="employeeName" label="部门"  align="center"/>
        <el-table-column prop="post" label="岗位"  align="center"/>
        <el-table-column  label="操作"   align="center">
            <template #default="scope">
                <el-button type="primary" link>查看详情</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!-- 分页 -->
    <table>
      <tr>
        <td>
          <el-pagination
            v-model:current-page="page.pageIndex"
            v-model:page-size="page.pageSize"
            :page-sizes="[5, 10, 15, 20]"
            :background="true"
            layout="total,slot, prev, pager,next"
            :total="page.totalCount"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            prev-text="上一页"
            next-text="下一页"
          >
            ,每页显示{{ page.pageSize }},当前第{{ page.pageIndex }}/{{ page.pageCount }}
            <el-button class="btn-prev" @click="handleCurrentChange(1)">首页</el-button>
          </el-pagination>
        </td>
        <td>
          <el-pagination
            v-model:current-page="page.pageIndex"
            v-model:page-size="page.pageSize"
            :page-sizes="[5, 10, 15, 20]"
            :background="true"
            layout="slot,sizes,jumper"
            :total="page.totalCount"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          >
            <el-button class="btn-prev" @click="handleCurrentChange(page.pageCount)"
              >尾页</el-button
            >
          </el-pagination>
        </td>
      </tr>
    </table>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted } from 'vue'
import axios from 'axios'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'

const apiUrl = import.meta.env.VITE_APP_API_URL;
const apiBedinUrl = import.meta.env.VITE_APPRead_API_URL;

onMounted(()=>{
    loadData();
})
const page = reactive({
    pageIndex:1,
    pageSize:3,
    totalCount:0,
    pageCount:0
})

//用户列表
const tableData = ref([])
const loadData=()=>{
    axios.post(apiUrl+'/api/Users/GetUsers',{
        pageIndex:page.pageIndex,
        pageSize:page.pageSize
    })
    .then(res=>{
        console.log("用户列表",res.data.data.list);
        tableData.value = res.data.data.list;
        page.totalCount=res.data.data.totalCount;
        page.pageCount=res.data.data.pageCount;
    })
}
//分页
const handleSizeChange = (val: number) => {
  page.pageSize = val;
  loadData();
};
const handleCurrentChange = (val: number) => {
  page.pageIndex = val;
  loadData();
};
</script>
